<template>
	<view class="box" @click="save1">	
		<canvas style="width: 750rpx; height: 1448rpx;" canvas-id="inviteCanvas" id="inviteCanvas"></canvas>
		
	</view>
</template>

<script>
	import {
		myuser
	} from "../../api/user.js"
	export default {
		data() {
			return {
				img: "https://fudiemao-1314539356.cos.ap-beijing.myqcloud.com/storage/default/20250106/ku3186136e920537773cf6fda3457871598f63b423.png",
				user: {}

			}
		},
		onLoad() {
			this.getuser()
		},
		onReady() {
			// 创建canvas

		},
		methods: {
			save1() {
				var that = this
				console.log(123456);
				uni.canvasToTempFilePath({
					canvasId: 'inviteCanvas',
					success: function(res) {
						// #ifdef H5
						that.saveImageToPhone(res.tempFilePath)
						// #endif
						// 在H5平台下，tempFilePath 为 base64
						console.log(res.tempFilePath)
						// #ifdef MP-WEIXIN || MP-ALIPAY
						uni.saveImageToPhotosAlbum({
							filePath: res.tempFilePath,
							success: function() {
								uni.$u.toast("保存成功")
							},
							fail: function() {
								uni.$u.toast("保存失败")
							}
						});
						// #endif

					},
					fail(reg) {
						console.log(reg);
					}
				})
			},
			getuser() {
				var that = this
				myuser().then(res => {
					
					that.user = res.data
					console.log(that.user,"sdasdd")
					that.canvasDraw(res.data)
					console.log("走了")
				})
			},
			async canvasDraw(data) {
				var ctx = uni.createCanvasContext('inviteCanvas', this)
				const screenWidth = uni.getSystemInfoSync().windowWidth; // 获取屏幕宽度
				const rpxToPx = screenWidth / 750; // 计算 rpx 转 px 比例
				// 绘制圆角矩形路径（参数：x, y, width, height, 圆角半径）
				ctx.clearRect(0, 0, 750 * rpxToPx, 1448 * rpxToPx);
				let avatarUrl = await new Promise((resove, reject) => {
					uni.getImageInfo({
						src: data.invite_code_image,
						success: function(image) {
							console.log(image,"获取头像信息")
							resove(image.path)
						}
					});
				})
				let codeUrl = await new Promise((resove, reject) => {
					uni.getImageInfo({
						src: "https://images.fudiemall.com/storage/default/20250527/inviteimg92fa7c620b121d5c1e096fbe989a194790482e25.png",
						success: function(image) {
							console.log(image,"获取图片信息")
							resove(image.path)
						}
					});
				})
				const x = 0,
					y = 0,
					width = 750 * rpxToPx,
					height = 1448 * rpxToPx,
					radius = 12;
				// ctx.arc(x + radius, y + radius, radius, Math.PI, Math.PI * 1.5); // 左上角
				// ctx.arc(x + width - radius, y + radius, radius, Math.PI * 1.5, Math.PI * 2); // 右上角
				ctx.arc(x + width - radius, y + height - radius, radius, 0, Math.PI * 0.5); // 右下角
				ctx.arc(x + radius, y + height - radius, radius, Math.PI * 0.5, Math.PI); //左下角
				// 设置填充颜色（支持 HEX、RGB、RGBA）
				ctx.setFillStyle('#ffffff');
				// 填充路径
				ctx.fill();
				const srcX1 = 0 * rpxToPx,
					srcY1 = 0 * rpxToPx,
					srcWidth1 = 750 * rpxToPx,
					srcHeight1 = 1448 * rpxToPx;
				ctx.drawImage(codeUrl, srcX1, srcY1, srcWidth1, srcHeight1)
				const srcX = 288 * rpxToPx, //左上角x坐标
					srcY = 530 * rpxToPx, //左上角y坐标
					srcWidth = 380 * rpxToPx, //图片宽度
					srcHeight = 380 * rpxToPx; //图片高度
			  ctx.save();
			
			    // 将画布原点移动到图片的中心位置
			    const imageCenterX = srcX + srcWidth / 2;
			    const imageCenterY = srcY + srcHeight / 2;
			    ctx.translate(imageCenterX, imageCenterY);
			
			    // 旋转 45 度
			    ctx.rotate((10 * Math.PI) / 180);
			
			    // 在旋转后的画布上绘制图片，注意此时坐标需要相对于新的原点
			    ctx.drawImage(avatarUrl, -srcWidth / 2, -srcHeight / 2, srcWidth, srcHeight);
			
			    // 恢复画布状态
			    ctx.restore();
				ctx.setTextBaseline('top')
				ctx.setFillStyle('#333333');
				ctx.setFontSize(32 * rpxToPx)
				// const nickname = data.nickname,
				// 	nicknameX = 178 * rpxToPx, //左上角x坐标
				// 	nicknameY = 48 * rpxToPx; //左上角y坐标
				// ctx.fillText(nickname, nicknameX, nicknameY)
				// 获取用户名的宽度
				// const nicknameWidth = ctx.measureText(nickname).width;
				// ctx.setFillStyle('#FFC300');
				// ctx.fillText(data.rank_name, nicknameX + nicknameWidth + 48 * rpxToPx, 52 * rpxToPx)
				// ctx.fillText(data.username, 178 * rpxToPx, 104 * rpxToPx)
				
				// ctx.setFontSize(26 * rpxToPx)
				// ctx.setFillStyle('#666666');
				// const inviteCount = '微信扫一扫，和我一起开启福叠猫的美好生活'
				// ctx.fillText(inviteCount, 60 * rpxToPx, 530 * rpxToPx)
				// ctx.setFillStyle('#999999');
				// ctx.fillText('实惠好物拼团到家', 60 * rpxToPx, 600 * rpxToPx)
				// ctx.fillText('|', 320 * rpxToPx, 600 * rpxToPx)
				// ctx.fillText('吃喝玩乐团购到店', 372 * rpxToPx, 600 * rpxToPx)

				// 二维码
		
				  ctx.shadowOffsetX = 2; // 阴影在 x 轴的偏移量
				    ctx.shadowOffsetY = 2; // 阴影在 y 轴的偏移量
				    ctx.shadowBlur = 4;    // 阴影的模糊程度
				    ctx.shadowColor = 'rgba(0, 0, 0, 0.5)'; // 阴影颜色
				ctx.setFillStyle('#fff');
				ctx.setFontSize(48 * rpxToPx)
				  const text = '邀请码：' + data.invite_code;
				    const textWidth = ctx.measureText(text).width;
				
				    // 保存当前画布状态
				    ctx.save();
				
				    // 将画布原点移动到文字的中心位置
				    const textX = 440 * rpxToPx;
				    const textY = 960 * rpxToPx;
				    ctx.translate(textX, textY);
				
				    // 旋转 45 度
				    ctx.rotate((10 * Math.PI) / 180);
				
				    // 在旋转后的画布上绘制文字
				    ctx.fillText(text, -textWidth / 2, 0);
				// 执行绘制
				setTimeout(() => {
					ctx.draw();
				}, 1000)
			},
			save() {

				return
				// #ifdef H5
				this.saveImageToPhone(this.user.invite_code_image)
				// #endif
				// #ifdef MP-WEIXIN
				uni.downloadFile({
					url: this.user.invite_code_image, //仅为示例，并非真实的资源
					success: (res) => {
						uni.saveImageToPhotosAlbum({
							filePath: res.tempFilePath,
							success: function() {
								uni.$u.toast("保存成功")
							},
							fail: function() {
								uni.$u.toast("保存失败")
							}
						});
						console.log(res)
						if (res.statusCode === 200) {
							console.log('下载成功');
						}
					}
				});
				// #endif
			},
			saveImageToPhone(imageUrl) {
				// 创建一个新的 Image 对象
				const img = new Image();
				img.crossOrigin = 'anonymous'; // 允许跨域
				img.src = imageUrl;
				console.log(img, "sssss")
				img.onload = () => {
					// 创建一个 canvas 元素
					const canvas = document.createElement('canvas');
					const ctx = canvas.getContext('2d');

					// 设置 canvas 的宽度和高度与图片一致
					canvas.width = img.width;
					canvas.height = img.height;

					// 在 canvas 上绘制图片
					ctx.drawImage(img, 0, 0);

					// 将 canvas 内容转为图片 URL
					const dataURL = canvas.toDataURL('image/png');

					// 创建一个 a 标签
					const a = document.createElement('a');
					a.href = dataURL;
					a.download = 'image.png'; // 设置下载的文件名为 image.png

					// 模拟点击 a 标签，触发下载
					document.body.appendChild(a);
					a.click();
					document.body.removeChild(a);
				};
			}
		}
	};
</script>

<style lang="scss" scoped>
	.box {
		width: 750rpx;
		height: 100vh;
		position: relative;
		// background: linear-gradient(173deg, #FFB598 2%, rgba(255, 219, 98, 0.5) 55%, rgba(255, 255, 255, 0.08) 100%);
		background: linear-gradient( 270deg, #FE7637 0%, #FE7D33 100%);
	}

	#inviteCanvas {
		width: 640rpx;
		/* #ifdef H5 || MP-WEIXIN */
		margin: 0 auto;
		/* #endif */
	}






	.btn {
		width: 690rpx;
		height: 80rpx;
		background: linear-gradient(90deg, #FA2222 2%, #FFC400 98%);
		border-radius: 376rpx 376rpx 376rpx 376rpx;
		text-align: center;
		line-height: 80rpx;
		margin: 0 auto;
		/* #ifdef MP-ALIPAY */
		position: absolute;
		bottom: 30rpx;
		left: 30rpx;
		/* #endif */
	
		margin-top: 58rpx;
		font-weight: 400;
		font-size: 32rpx;
		color: #FFFFFF;
	}
</style>